import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Button, Row, Col, Icon, message } from 'antd'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom';
import { login } from '../../actions/auth'
const FormItem = Form.Item

import './index.less'

const propTypes = {
  user: PropTypes.object,
  loggingIn: PropTypes.bool,
  loginErrors: PropTypes.string
};
import { doLogin } from '@/config/api'
import { Httpost } from '@/config/request'
class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      user: 'a',
      password: '123456'
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        Httpost(doLogin, values).then((res) => {
          if(res.resultCode === 200){
             this.props.history.push('/home')
             message.success(res.msg)

          }else{
            message.error(res.msg)
          }
        }).catch((res) => {

        })
      }
    });
  }

  toRegister() {
    this.props.history.replace('/register');
  }

  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Row className="login-row" type="flex" justify="space-around" align="middle">
        <Col span="8">
          <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} className="login-form">
            <FormItem>
              {getFieldDecorator('user')(
                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder='admin' />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password')(
                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type='password' placeholder='123456' />
              )}
            </FormItem>
            <p>
              <Button className="btn-login" type='primary' size="large" icon="poweroff" loading={this.state.loading} htmlType='submit'>登录</Button>
            </p>
            <p>
              <Button className="btn-register" size="large" icon="right-square-o" htmlType='button' onClick={this.toRegister.bind(this)} >去注册</Button>
            </p>
          </Form>
        </Col>
      </Row>

    )
  }
}

Login.propTypes = propTypes;

Login = Form.create()(Login);

function mapStateToProps(state) {
  const { auth } = state;
  if (auth.user) {
    return { user: auth.user, loggingIn: auth.loggingIn, loginErrors: '' };
  }

  return { user: null, loggingIn: auth.loggingIn, loginErrors: auth.loginErrors };
}

function mapDispatchToProps(dispatch) {
  return {
    login: bindActionCreators(login, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))
